<template>
  <div class="card-edit-right-4-CARD_JY001">
    <!-- CardEditRight4CardJY0001 -->
    <p class="CARD_JY001-add">
      <span> 打榜组合列表 </span>
      <el-button type="primary" size="small" round @click="addItem">添加+</el-button>
    </p>

    <div class="CARD_JY001-con">
      <template :key="index" v-for="(card, index) in curTargetItem.card_group">
        <div class="CARD_JY001-con-box">
          <p class="CARD_JY001-con-box-title">
            <el-tag
              type=""
              size="small"
              effect="plain"
              style="margin: 5px 10px;"
              @click="handlerShowOrClose(index)">
                {{ "打榜组合 -- " + ( index + 1 ) }}
            </el-tag>

            <span class="CARD_JY001-con-box-title-show" @click="handlerShowOrClose(index)">
              <el-icon class="CARD_JY001-con-box-title-show-arrow" :class="{'is-drop-down': arrCompShowBox.indexOf(index) > -1}"><arrow-up /></el-icon>
              <i class="CARD_JY001-con-box-title-show-arrow-text">
                {{arrCompShowBox.indexOf(index) > -1 ? '收起' : '展开'}}
              </i>
            </span>
          </p>

          <transition name="drop-down">
            <div class="CARD_JY001-con-box-card-flip" v-if="arrCompShowBox.indexOf(index) > -1">
              <div
                class="CARD_JY001-con-box-card"
                :key="index">
                  <el-tag type="info" size="small" effect="light" style="margin: 5px 10px;">{{ 'CARD_' + card.card_type }}</el-tag>

                  <template
                    :key="card.itemid + '_' + index + '_' + itemKey"
                    v-for="(item, itemKey) in _getCardEditableParams('CARD_' + card.card_type)">
                      <EditableParam
                        v-if=" itemKey != 'Idx_visible' "
                        :compId="card.Idx_name"
                        :paramItem="item"
                        :paramKey="itemKey"
                        :paramVal="card[itemKey]"
                        :parentKeys="[]"
                        :parentVal="card"
                        :original="card"
                        :editableParamsLists="CardEditableParamsLists"
                        :editableParamsLists4Add="CardEditableParamsDefaultLists4ListAdd"
                        :type="'CARD_' + card.card_type"
                        @change="val => onChange(val, index)">
                      </EditableParam>
                  </template>
              </div>
            </div>
          </transition>

          <p class="CARD_JY001-delete">
            <el-button type="danger" size="small" round @click="deleteItem(index)">删除 <el-icon><delete /></el-icon></el-button>
          </p>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
  import {
    CardTypeDatas,
    CardEditableParamsLists,
    CardEditableParamsDefaultLists4ListAdd
  } from '@/views/card/js/data/cardDatas/index.js';
  import { isString, isArray } from '@/utils/public.js';
  import { guid } from '@/plugins/utils.js';
  import { BUSINESS_NO_CARD } from '@/views/card/js/data/cardSiteData';
  import EditNormalComponentsGather from '@/views/card/js/mixins/edit-normal-components-gather.js';
  import CardCommonComputed from '@/views/card/js/mixins/card-common-computed.js';
  import { defineAsyncComponent } from 'vue';
  import { mapActions } from 'vuex'
  export default {
    name: 'cardEditRight4CardJY0001',
    mixins: [CardCommonComputed, EditNormalComponentsGather],
    data() {
      return {
        /* editable params */
        CardEditableParamsLists: CardEditableParamsLists,
        CardEditableParamsDefaultLists4ListAdd: CardEditableParamsDefaultLists4ListAdd,

        /* cardSite */
        cardSiteId: '',

        /* config */
        arrCompShowBox: [0],
      }
    },
    computed: {
      cardEditableParams() {
        return CardEditableParamsLists[this.curSelectCardType] || null;
      },
      _getCardEditableParams() {
        return (cardType) => {
          return CardEditableParamsLists[cardType] || null;
        }
      },

      /* curTargetItem */
      Idx_comp_cards() {
        return this.curTargetItem && this.curTargetItem.Idx_comp_cards || '';
      },
      arrCompCardTypesList() {
        let bIsAddable = true;
        const CardEditableParamsListsKeys = Object.keys(this.CardEditableParamsLists);
        let arrCompCardsList = [];

        if( isString( this.Idx_comp_cards ) && this.Idx_comp_cards != '' ) {
          arrCompCardsList = this.Idx_comp_cards.split(',');
          arrCompCardsList && arrCompCardsList.forEach((cardTypeKey) => {
            if( CardEditableParamsListsKeys.indexOf(cardTypeKey) <= -1 ) bIsAddable = false;
          });
        }
        else bIsAddable = false;

        if( !bIsAddable ) return null;
        else return arrCompCardsList;
      },
    },
    components: {
      'EditableParam': defineAsyncComponent(() => import('@/views/card/components/recursion/EditableParam.vue')),
    },
    created() {
      // 1. cardSiteId
      this.cardSiteId = this.$route.params.id;
    },
    methods: {
      /* 添加 */
      addItem() {
        // 1. 判断是否存在 添加 子card类型
        if( !this.arrCompCardTypesList ) return;  // 添加失败

        // 2. 构造 、 添加
        // 目前仅支持 CARD_27
        let cardType = this.arrCompCardTypesList[0];
        let { card_group } = this.curTargetItem;
        let cardGroupLen = isArray( card_group ) ? card_group.length : 0;
        let newCardItem = _.cloneDeep(CardTypeDatas[cardType].data)
        const itemId = guid();
        newCardItem.itemid = BUSINESS_NO_CARD + '_-_' + this.cardSiteId + '_-_' + itemId;
        newCardItem.Idx_index = cardGroupLen;
        newCardItem.Idx_name = itemId;
        this.curLists[this.curSelectCardIndex] = {
          ...this.curTargetItem,
          card_group: [
            ...this.curTargetItem.card_group,
            newCardItem,
          ],
        };

        // 3. update
        this.updateCardLists(this.curLists);
      },
      deleteItem(index) {
        // 1. 删除
        let { card_group } = this.curTargetItem;
        card_group.splice(index, 1);
        card_group = card_group.map((comp, index) => {
          comp.Idx_index = index;
          return comp;
        });
        this.curLists[this.curSelectCardIndex] = {
          ...this.curTargetItem,
          card_group: card_group,
        };

        // 2. update
        this.updateCardLists(this.curLists);
      },

      /* update */
      onChange(val, index) {
        // 1. handler with args[0]
        this.curTargetItem.card_group[index] = val;
        this.curLists[this.curSelectCardIndex] = this.curTargetItem;

        // 2. update
        this.updateCardLists(this.curLists);
      },

      /* config */
      handlerShowOrClose(index) {
        if( this.arrCompShowBox.indexOf(index) > -1 )
          this.arrCompShowBox.splice( this.arrCompShowBox.indexOf(index), 1 );
        else
          this.arrCompShowBox.push(index);
      },
    },
  }
</script>

<style lang="scss">
  .drop-down-enter-active, .drop-down-leave-active {
    opacity: 1;
    transform: scaleY(1);
    transition: transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);
    transform-origin: center top;
  }
  .drop-down-enter, .drop-down-leave-active {
    opacity: 0;
    transform: scaleY(0);
  }

  .card-edit-right-4-CARD_JY001 {
    min-height: 100px;
    border: 2px solid #ebeef5;
    border-radius: 4px;
    box-shadow: 0 0 4px 0 rgba(18, 123, 255, 0.1);

    .CARD_JY001-add {
      margin: 10px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .CARD_JY001-delete {
      margin: 10px 10px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

    .CARD_JY001-con {
      .CARD_JY001-con-box {
        margin: 20px 3px;
        border: 2px solid #ebeef5;
        border-radius: 4px;
        box-shadow: 0 0 4px 0 rgba(18, 123, 255, 0.1);

        .CARD_JY001-con-box-title {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .CARD_JY001-con-box-title-show {
            padding: 0 10px;
            min-width: 60px;
            color: #aaa;
            display: flex;
            justify-content: flex-end;
            align-items: center;

            .is-drop-down {
              transform: rotate(180deg);
            }
            .CARD_JY001-con-box-title-show-arrow {
              transition: transform 0.3s ease;
            }
            .CARD_JY001-con-box-title-show-arrow-text {
              display: none;
              margin-left: 2px;
              font-size: 12px;
              font-style: normal;
              transform-origin: center right;
              animation: openRight 0.3s ease 1;
            }

            &:hover {
              color: #409eff;
            }
          }

          &:hover {
            .CARD_JY001-con-box-title-show-arrow-text {
              display: inline;
            }
          }
        }

        .CARD_JY001-con-box-card {
          margin: 10px 5px;
          border: 2px solid transparent;
          border-radius: 4px;
          box-shadow: 0 0 4px 0 rgba(18, 123, 255, 0.1);

          &:hover {
            border-color: #b3d8ff;
          }
        }
      }
    }
  }
</style>
